<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>事件绑定</title>
    </head>
    <body>
        <div id="root"></div>

        <script src="../js/react.development.js"></script>
        <script src="../js/react-dom.development.js"></script>
        <script src="../js/babel.min.js"></script>

        <script type="text/babel">
            // function fn(){
            //     console.log('---',this);
            // }

            //声明类式组件
            class App extends React.Component {
                state = {
                    isNight: false
                };
                //构造方法中 this 指向实例对象的
                constructor(){
                    super();//必须要编写
                    //创建新的方法
                    this.fn = this.fn.bind(this);
                }

                render() {
                    let isNight = this.state.isNight;
                    return (
                        <div>
                        <h2>
                            至尊宝, 我是 {isNight ? "青霞仙子" : "紫霞仙子"}
                        </h2>
                        <button onClick={this.fn}>点击切换白天与黑夜</button>
                    </div>
                    );
                }

                //声明一个方法
                fn(){
                    // console.log('事件触发啦!!!', this);
                    // this.setState();// setState 属于实例对象
                    //用来修改 state 中的值, this.state.isNight = false 不建议这样子的修改 state 中的值
                    //setState 执行之后, 会自动调用 render 方法重新渲染组件
                    this.setState({
                        isNight: !this.state.isNight
                    })
                }
            }

            ReactDOM.render(<App />, document.querySelector("#root"));
        </script>
    </body>
</html>
